<template>
  <div class="main" :class="{ danger: alarmModeCount > 0 }">
    <Header class="header"></Header>
    <div class="main-container">
      <div class="global-search-value" v-if="globalParams.areaName || globalParams.startTime || globalParams.endTime">
        <span class="global-search-area" v-if="globalParams.areaName">
          {{ globalParams.areaName }}
        </span>
        <span v-if="globalParams.areaName && (globalParams.startTime || globalParams.endTime)">&emsp;|&emsp;</span>
        <span v-if="globalParams.startTime && globalParams.endTime" class="global-search-timeRange">选择日期：{{
          globalParams.startTime }} - {{ globalParams.endTime }}</span>
      </div>
      <MiningMap class="mining-map"></MiningMap>
      <MiningTools class="tools" v-if="!globalParams.alarmId"></MiningTools>
      <template v-if="!isHistory">
        <DataView class="data-view"></DataView>
      </template>
      <template v-else>
        <template v-if="globalParams.alarmId">
          <TrackTools class="track-tools" @changeScene="changeScene"></TrackTools>
          <AlarmInfo class="data-view"></AlarmInfo>
          <SceneType class="alarmCurve" :type="sceneType"></SceneType>
          <PersonTrack v-if="!['dc', 'tf'].includes(sceneType)"></PersonTrack>
        </template>
        <Timeline v-if="sceneType !== 'dc'" :class="{ full: !globalParams.alarmId }" class="time-line"></Timeline>
        <el-button type="primary" class="exit-btn" @click="exitBacktracking">退出回溯模式</el-button>
      </template>
    </div>

    <video class="video" src="/ux3.mp4" autoplay muted loop></video>
    <div id="dialog-box">
      <div class="close-all-btn" v-show="bDialogCount" @click="closeAllBDialog">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Header from '@/views/header/index.vue'
import MiningMap from '@/views/MiningMap/index.vue'
import DataView from '@/views/DataView/index.vue'
import MiningTools from '@/views/MiningTools/index.vue'
import AlarmInfo from '@/views/scene/AlarmInfo/index.vue'
import SceneType from '@/views/scene/sceneType/index.vue'
import PersonTrack from '@/views/scene/personTrack.vue'
import TrackTools from '@/views/scene/trackTools.vue'
import Timeline from '@/views/Timeline/index.vue'
import { computed, onUnmounted, ref, watch } from 'vue'
import { useAuthStore } from '@/store/auth'
import { storeToRefs } from 'pinia'
import { $bDialog, bdialogQueue } from '@/components/b-dialog'
import { CloseBold } from '@element-plus/icons-vue'
import { useAlarmStore } from '@/store/alarm'
import { closeSSE } from '@/api/sse'
const authStore = useAuthStore()
const { globalParams, modeParams, historyData } = storeToRefs(authStore)
// 告警数量
const alarmStore = useAlarmStore()
const { alarmCount } = storeToRefs(alarmStore)

const alarmModeCount = computed(() => {
  if (modeParams.value.model === 'realtime') {
    return alarmCount.value
  } else {
    return historyData.value.alarmList.length
  }
})

// 关闭所有窗口
const bDialogCount = computed(() => {
  return bdialogQueue.value.length
})
function closeAllBDialog () {
  $bDialog.closeAll()
  window.bDialogLeft = 150
  window.bDialogTop = 40
}
// 切换模式
const isHistory = computed(() => {
  return modeParams.value.model === 'backtracking'
})

watch(() => isHistory.value, (val) => {
  if (!val) {
    closeSSE()
  }
})
const sceneType = ref('ws')
function changeScene(scene: string) {
  sceneType.value = scene
}
function exitBacktracking() {
  modeParams.value.model = 'realtime'
}

onUnmounted(() => {
  closeSSE();
})
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;

  .header {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 76px;
    z-index: 20;
  }

  .main-container {
    height: 100%;
    display: flex;
    position: relative;

    .global-search-value {
      display: flex;
      align-items: center;
      position: absolute;
      top: 140px;
      left: 60px;
      padding: 8px 160px 8px 20px;
      background: linear-gradient(90deg,
          rgba(66, 255, 235, 0.2) 45.084%,
          rgba(9, 154, 154, 0) 99.983%);
      color: var(--el-color-primary);
      z-index: 1;
    }

    .tools {
      position: absolute;
      top: calc(50% + 30px);
      left: 60px;
      transform: translateY(-50%);
      z-index: 21;
    }

    .mining-map {
      width: 100%;
      height: 100%;
    }

    .data-view {
      position: absolute;
      top: 100px;
      right: 0;
      padding-bottom: 24px;
      width: 320px;
      height: calc(100% - 100px);
      z-index: 30;
    }

    .track-tools{
      position: absolute;
      top: calc(50% + -80px);
      left: 60px;
      transform: translateY(-50%);
      z-index: 21;
    }

    .alarmCurve {
      position: absolute;
      bottom: 70px;
      width: calc(100% - 400px);
      left: 60px;
      z-index: 30;
    }

    .time-line {
      position: absolute;
      bottom: 20px;
      left: 60px;
      width: calc(100% - 120px - 280px);
      z-index: 40;

      &.full {
        width: calc(100% - 120px);
      }
    }

    .exit-btn{
      position: fixed;
      top: 120px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 40;
    }
  }

  &.danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: dangerBoxShadow 1s infinite;
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    pointer-events: none;
  }

  #dialog-box {
    position: fixed;
    top: 80px;
    left: 0;
    width: calc(100% - 320px);
    height: calc(100% - 80px);
    z-index: 100;
    overflow: hidden;
    pointer-events: none;

    .close-all-btn {
      pointer-events: all;
      position: absolute;
      bottom: 60px;
      left: calc(50% - 25px);
      width: 50px;
      height: 50px;
      background: var(--el-color-primary-light-8);
      color: var(--el-color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;

      &:hover {
        background: var(--el-color-primary-light-9);
      }

      &::before {
        content: '';
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid var(--el-color-primary-light-8);
        animation: scale 1s infinite ease-in-out;
      }
    }
  }
}

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0.2;
  }
}
</style>
